<template>
  <div id="app" class="app-container">
    <AppHeader v-if="showHeader" />
    
    <main class="main-content" :class="{ 'with-header': showHeader }">
      <router-view v-slot="{ Component, route }">
        <transition name="fade" mode="out-in">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>
    
    <!-- 全局加载组件 -->
    <Loading v-if="loading" text="加载中..." />
    
    <!-- 全局通知 -->
    <Teleport to="body">
      <div id="global-notifications"></div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import AppHeader from '@/components/layout/Header.vue'
import Loading from '@/components/common/Loading.vue'
import { useAppStore } from '@/stores'

const route = useRoute()
const appStore = useAppStore()

// 计算属性
const loading = computed(() => appStore.loading)

// 判断是否显示头部导航
const showHeader = computed(() => {
  const hideHeaderRoutes = ['Home']
  return !hideHeaderRoutes.includes(route.name as string)
})

// 生命周期
onMounted(() => {
  // 初始化应用
  initApp()
})

const initApp = async () => {
  try {
    appStore.setLoading(true)
    
    // 这里可以进行一些初始化操作
    // 比如检查用户登录状态、加载用户偏好设置等
    
    // 模拟初始化延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
  } catch (error) {
    console.error('App initialization failed:', error)
  } finally {
    appStore.setLoading(false)
  }
}
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.main-content {
  min-height: 100vh;
  transition: all 0.3s ease;
}

.main-content.with-header {
  min-height: calc(100vh - 80px);
  padding-top: 0;
}

/* 路由过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content.with-header {
    min-height: calc(100vh - 120px);
  }
}
</style>